<ng-container *ngIf="participantList && participantList.length > 0">
  <nz-card
    [nzTitle]="listTitle"
    nz-type="inner"
    style="margin-bottom: 1em">
    <nz-list>
      <ng-container *ngFor="let u of participantList; let i = index">
        <nz-list-item
          *ngIf="i + 1 <= defaultListSize"
          nzSize="small"
          [class.selected-participant]="u.id == selectedItem?.id"
          (click)="onParticipantSelected(u)"
          class="participant-list-item">
          <ng-container
            [ngTemplateOutlet]="itemTemplateRef || null"
            [ngTemplateOutletContext]="{ $implicit: u }">
          </ng-container>
        </nz-list-item>
      </ng-container>
    </nz-list>
    <button
      *ngIf="participantList.length > defaultListSize"
      nz-button
      nzType="default"
      nzSize="small"
      (click)="onExpandClicked()">
      <i
        nz-icon
        nzType="vertical-align-bottom"></i>
      Expand
    </button>
    <button
      *ngIf="isExpanded"
      nz-button
      nzType="default"
      nzSize="small"
      (click)="onCollapseClicked()">
      <i
        nz-icon
        nzType="vertical-align-top"></i>
      Collapse
    </button>
  </nz-card>
</ng-container>
